<template>
  <div class="container">
    <div class="btnBox">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" @keyup.enter.native="search">
          <a-form-item label="日期选择">
            <a-range-picker
              v-decorator="[ 'time',{ initialValue: [moment().startOf('day').format(),moment().endOf('day')] } ]"
              format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="disabled"
              :ranges="timeRangs"
            >
            </a-range-picker>
          </a-form-item>
          <a-form-item label="">
            <a-input v-decorator="[ 'userNo' ]" placeholder="请输入用户ID" />
          </a-form-item>
          <a-form-item label="">
            <a-input v-decorator="[ 'userPhone' ]" placeholder="请输入登录名" />
          </a-form-item>
          <a-form-item label="">
            <a-input v-decorator="[ 'investmentProjectName' ]" placeholder="请输入投资项目名称" />
          </a-form-item>
          <a-form-item label="">
            <a-select v-decorator="[ 'investmentType',{ initialValue: '' }]" placeholder="请选择状态" style="width: 100px">
              <a-select-option value="" key=""> 投资类型</a-select-option>
              <a-select-option value="BIỂN ĐẢO"> BIỂN ĐẢO </a-select-option>
              <a-select-option value="DU LỊCH"> DU LỊCH </a-select-option>
              <a-select-option value="VY-TRAVEL"> VY-TRAVEL </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="">
            <a-select v-decorator="[ 'subscriptionType',{ initialValue: '' }]" placeholder="请选择状态" style="width: 100px">
              <a-select-option value="" key=""> 认购类型</a-select-option>
              <a-select-option value="1"> 小时</a-select-option>
              <a-select-option value="2"> 天</a-select-option>
              <a-select-option value="3"> 单月</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="">
            <a-select v-decorator="[ 'isCycleOver',{ initialValue: '' }]" placeholder="请选择状态" >
              <a-select-option value="" key=""> 周期是否结束</a-select-option>
              <a-select-option value="0"> 是</a-select-option>
              <a-select-option value="1"> 否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="onSeach"
      bordered
      :rowKey="(record) => record.id"
    >
      <template slot="isCycleOver" slot-scope="text, record">
        <a-tag :color="text ? 'green' : 'red'">
          {{text ? '否' : '是'}}
        </a-tag>
      </template>
    </s-table>
  </div>
</template>

<script>
import STable from '@/components/Table'
import { mapGetters } from 'vuex'
import store from '@/store'
import { Ellipsis } from '@/components'
import moment from 'moment'
import { timeRangs } from '@/utils/util'
import { operationTypeList, subscriptionTypeList } from '@/views/mapping'
import { subReportList } from '@/api/user-manage'
export default {
  name: 'subscriptionReport',
  components: { Ellipsis, STable },
  computed: {
    timeRangs() {
      return timeRangs
    },
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      // 查询条件参数
      pageNum: 0,
      pageSize: 10,
      total: 0,
      columns: [
        { title: '认购日期', dataIndex: 'subscriptionTime', align: 'center' },
        { title: '用户ID', dataIndex: 'userNo', align: 'center', width:120,},
        { title: '登录名', dataIndex: 'userPhone', align: 'center' },
        { title: '投资类型', dataIndex: 'investmentType', align: 'center',width:120,  },
        { title: '投资项目名称', dataIndex: 'investmentProjectName', align: 'center' },
        { title: '认购类型', dataIndex: 'subscriptionType', align: 'center', customRender: (text) => { return text ? subscriptionTypeList[text] : text}  },
        { title: '认购周期', dataIndex: 'subscriptionCycle', align: 'center'},
        { title: '认购金额', dataIndex: 'buyAmount', align: 'center', customRender: (text) => { return this.common.numFormat(text)} },
        { title: '收益率（%）', dataIndex: 'incomeRate', align: 'center' },
        { title: '周期是否结束', dataIndex: 'isCycleOver', align: 'center', customRender: (text) => { return  text ? '否' : '是'} },
        { title: '投资返还金额', dataIndex: 'investmentReturnAmount', align: 'center', customRender: (text) => { return this.common.numFormat(text)} },
        { title: 'VIP额外收益', dataIndex: 'vipIncome', align: 'center', customRender: (text) => { return this.common.numFormat(text)} },
        { title: '实际返还金额', dataIndex: 'actualReturnAmount', align: 'center', customRender: (text) => {return this.common.numFormat(text)} },
        { title: '已返还金额', dataIndex: 'amountReturned', align: 'center', customRender: (text) => {return this.common.numFormat(text)} },
        { title: '已返还次数', dataIndex: 'returnedTimes', align: 'center' },
      ]
    }
  },
  methods: {
    moment,
    disabled(current) {
      return current && current > moment().subtract().endOf('day')
    },
    // 条件查询列表
    onSeach(parameter) {
      return new Promise((resolve, reject) => {
        const params = {
          ...parameter,
          userId: store.getters.userInfo?.userId,
          ...this.form.getFieldsValue(),
          startTime: moment(this.form.getFieldValue('time')[0]).format('YYYY-MM-DD HH:mm:ss'),
          endTime: moment(this.form.getFieldValue('time')[1]).format('YYYY-MM-DD HH:mm:ss'),
        }
        delete params.time
        subReportList(params).then(res => {
          resolve(res.data)
        }).catch((err) => {
          console.log(err, 'err')
          // reject(err)
        })
      })
    },
    cancel() {
      this.visible = false
    },
    refresh(boo) {
      this.$refs.table.refresh(boo)
    },
    search() {
      this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
    },
    searchReset() {
      this.form.resetFields()
      this.$refs.table.refresh(true) // refresh() 不传参默认值 false 不刷新到分页第一页
    }
  }
}
</script>
<style lang="less" scoped>
</style>
